import React from "react";
import {Stack, Badge, Group, Tooltip, ActionIcon, Button, Progress} from "@mantine/core";
import {notifications} from "@mantine/notifications";
import {IconCloudX, IconBolt, IconCheck, IconPower} from "@tabler/icons-react";
import LottieWrapper from "./LottieWrapper";

interface StepTwoSimuMainProps {
  progress: number;
  simulationState: "IDLE" | "RUNNING" | "FINISHED";
  isChecked: boolean;
  setProgress: (progress: number) => void;
  setSimulationState: (simulationState: "IDLE" | "RUNNING" | "FINISHED") => void;
}

export const StepTwoSimuMain = ({
  progress,
  simulationState,
  isChecked,
  setProgress,
  setSimulationState,
}: StepTwoSimuMainProps) => {
  return (
    <>
      <Progress radius={0} value={progress} striped animated />
      <Stack align="center">
        <LottieWrapper simulationState={simulationState} height={240} />
        <Badge
          variant="outline"
          radius="xs"
          color={
            simulationState === "IDLE"
              ? "gray.4"
              : simulationState === "RUNNING"
                ? "orange.4"
                : "lime.4"
          }
        >
          {simulationState}
        </Badge>

        <Group justify="center">
          {/* 左侧删除结果按钮 */}
          <Tooltip
            label="删除结果"
            withArrow
            position="bottom"
            transitionProps={{transition: "fade", duration: 300}}
          >
            <ActionIcon
              variant="outline"
              color="red"
              w={40}
              h={60}
              disabled={simulationState != "FINISHED" || isChecked}
              onClick={() => {
                notifications.show({
                  title: "系统提示",
                  message: "仿真结果已删除",
                  color: "green",
                });
                setSimulationState("IDLE");
                setProgress(0);
              }}
            >
              <IconCloudX size={16} />
            </ActionIcon>
          </Tooltip>

          {/* 中间启动仿真按钮 */}
          <Tooltip
            label="启动仿真"
            withArrow
            position="bottom"
            transitionProps={{transition: "fade", duration: 300}}
          >
            <ActionIcon
              variant="outline"
              color="green"
              w={200}
              h={60}
              loading={simulationState === "RUNNING"}
              loaderProps={{type: "dots", size: "50%"}}
              disabled={simulationState === "FINISHED"}
              onClick={() => {
                setSimulationState("RUNNING");
                setProgress(10);
              }}
            >
              {simulationState === "IDLE" ? (
                <IconBolt style={{width: "60%", height: "60%"}} stroke={1} />
              ) : simulationState === "FINISHED" ? (
                <IconCheck style={{width: "60%", height: "60%"}} stroke={1} />
              ) : null}
            </ActionIcon>
          </Tooltip>

          {/* 右侧取消仿真按钮 */}
          <Tooltip
            label="取消仿真"
            withArrow
            position="bottom"
            transitionProps={{transition: "fade", duration: 300}}
          >
            <ActionIcon
              variant="outline"
              color="red"
              w={40}
              h={60}
              disabled={simulationState != "RUNNING"}
              onClick={() => {
                notifications.show({
                  title: "系统提示",
                  message: "仿真任务已取消",
                  color: "green",
                });
                setSimulationState("IDLE");
                setProgress(0);
              }}
            >
              <IconPower size={16} />
            </ActionIcon>
          </Tooltip>
        </Group>
        <Group justify="center" mt="md">
          <Button
            size="xs"
            variant="default"
            onClick={() => {
              setSimulationState("FINISHED");
              setProgress(100);
            }}
          >
            后端仿真完成callback
          </Button>
        </Group>
      </Stack>
    </>
  );
};
